<template>
	<view>
		<!-- 收藏列表 -->
		<view class="goods-list">
			<empty src="empty" v-if="goodsList.length==0" title="收藏夹为空" text="赶快去添加商品吧." />
			<view class="row" v-for="(row,index) in goodsList" :key="index" >
				<!-- 删除按钮 -->
				<view class="menu">
					<view class="menu_delete menu_sub">
						<view class="icon"  @tap.stop="deleteGoods(row.goodsId)">&#xe631;</view>
					</view>
					<view class="menu_share menu_sub">
						<view class="icon"  @tap.stop="share(row.id)">&#xe65a;</view>
					</view>
					
				</view>				
				<!-- 商品 -->
				<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
					<!-- 商品信息 -->
					<view class="goods-info" @tap="toGoods(row)">
						<view class="img">
							<img class="goods-img" :src="row.originalImg && row.originalImg | formatUrl"></img>
						</view>
						<view class="info">
							<view class="title">{{row.goodsName}}</view>
							<view class="spec">{{row.goodsBrief}}</view>
							<view class="price-number">
								<view class="price">￥{{row.shopPrice}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import otherApis from '@/common/services/other.js'
	import empty from '@/components/empty.vue'
	export default ({
		data() {
			return {
				goodsList:[
					{id:1,img:'/static/product/dami.jpg',name:'五常大米  玉稻嘉禾',spec:'精品礼盒装',price:159,number:1,selected:false},
					{id:2,img:'/static/product/dami.jpg',name:'五常大米  玉稻嘉禾',spec:'精品礼盒装',price:159,number:1,selected:false},
					{id:3,img:'/static/product/dami.jpg',name:'五常大米  玉稻嘉禾',spec:'精品礼盒装',price:159,number:1,selected:false},
					{id:4,img:'/static/product/dami.jpg',name:'五常大米  玉稻嘉禾',spec:'精品礼盒装',price:159,number:1,selected:false},
				],
				//控制滑动效果
				theIndex:null,
				oldIndex:null,
				isStop:false
			}
		},
		components: {
			empty
		},
		onLoad() {
			otherApis.getCollectionList().then(res => {
				this.goodsList = res;
			})
		},
		filters: {
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
		methods: {
			//控制左滑删除效果-begin
			touchStart(index,event){
				//多点触控不触发
				if(event.touches.length>1){
					this.isStop = true;
					return ;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
			},
			touchMove(index,event){
				//多点触控不触发
				if(event.touches.length>1){
					this.isStop = true;
					return ;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];
				
				if(this.isStop||Math.abs(moveX)<5){
					return ;
				}
				if (Math.abs(moveY) > Math.abs(moveX)){
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}
				
				if(moveX<0){
					this.theIndex = index;
					this.isStop = true;
				}else if(moveX>0){
					if(this.theIndex!=null&&this.oldIndex==this.theIndex){
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(()=>{
							this.oldIndex = null;
						},150)
					}
				}
			},
			touchEnd(index,$event){
				//结束禁止触发效果
				this.isStop = false;
			},
			//控制左滑删除效果-end
			
			
			//商品跳转
			toGoods(e){
				uni.navigateTo({
					url: `../goods/goods?goodsId=${e.goodsId}`
				});
			},
			//删除商品
			deleteGoods(goodsId){
				let len = this.goodsList.length;
				for(let i=0;i<len;i++){
					if(goodsId==this.goodsList[i].goodsId){
						this.goodsList.splice(i, 1);
						break;
					}
				}
				this.oldIndex = null;
				this.theIndex = null;
				otherApis.deleteCollection(goodsId).then(res => {
					uni.showToast({title: `商品${e.goodsId}取消收藏`,icon:"none"});
				})
			},
			share(id) {
				uni.showToast({title: '商品'+goodsId + '分享成功',icon:"none"});
			}
		}
	})
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('../../css/font/iconfont.eot');
		src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../../css/font/iconfont.woff') format('woff'),
		url('../../css/font/iconfont.ttf') format('truetype'),
		url('../../css/font/iconfont.svg#iconfont') format('svg');
	}
	.icon {
		font-family:"iconfont" !important;
		font-weight: 200;
		font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		cursor: pointer;
		&:hover {
			color: #E80505;
		}
	}
.goods-list{
	width: 100%;
	padding: 0upx 20upx 120upx 20upx;
	.tis{
		width: 100%;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
	}
	.row{
		width: 100%;
		height: 200upx;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		margin-top: 20upx;
		.delete {
			font-size: 56upx;
		}
		.menu{
			position: absolute;
			display: flex;
			width: 50%;
			height: 100%;
			right: 0;
			z-index: 2;
			.menu_share{
				background-color: orange;
			}
			.menu_delete{
				background-color: #E80505;
			}
			.menu_sub{
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				.icon{
					color: #fff;
					font-size: 50upx;
				}
			}
		}
		.carrier{
			@keyframes showMenu {
				0% {transform: translateX(0);}100% {transform: translateX(-50%);}
			}
			@keyframes closeMenu {
				0% {transform: translateX(-50%);}100% {transform: translateX(0);}
			}
			&.open{
				animation: showMenu 0.25s linear both;
			}
			&.close{
				animation: closeMenu 0.15s linear both;
			}
			background-color: #fff;
			.checkbox-box{
				padding-left: 20upx;
				flex-shrink: 0;
				height: 22vw;
				margin-right: 20upx;
			}
			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;

			.goods-info{
				width: 100%;
				height: 200upx;
				display: flex;
				padding: 4upx 4upx;
				.img{
					display: block;
					width: 190upx;
					height: 190upx;
					border-radius: 5upx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 18upx;
					border: 1px solid #e3e3e3;
					border-radius: 8px;
					.goods-img{
						width: 190upx;
						height: 190upx;
					}
				}
				.info{
					width: 100%;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					position: relative;
					height: 180upx;
					padding: 10upx;
					.title{
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						// text-align: justify;
						overflow: hidden;
					}
					.spec{
						font-size: 20upx;
						background-color: #f3f3f3;
						color: #a7a7a7;
						height: 30upx;
						display: flex;
						align-items: center;
						padding: 0 10upx;
						border-radius: 15upx;
						margin-bottom: 20vw;
					}
					.price-number{
						position: absolute;
						width: 100%;
						bottom: 0upx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 28upx;
						height: 60upx;
						.price{
							color: #E80505;
							font-weight: 700;
						}
						.number{
							display: flex;
							justify-content: center;
							align-items: flex-end;
							.input{
								width: 60upx;
								height: 60upx;
								margin: 0 10upx;
								background-color: #f3f3f3;
								input{
									width: 60upx;
									height: 60upx;
									display: flex;
									justify-content: center;
									align-items: center;
									text-align: center;
									font-size: 26upx;
								}
							}
							.sub ,.add{
								width: 45upx;
								height: 45upx;
								background-color: #f3f3f3;
								border-radius: 5upx;
								.icon{
									font-size: 22upx;
									width: 45upx;
									height: 45upx;
									display: flex;
									justify-content: center;
									align-items: center;
									
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
